<template>
  <div class="base-sign-in">
    <el-tabs v-model="currentTab" @tab-click="tabClick">
      <el-tab-pane v-for="(tab, $index) in tabs" :key="$index" :name="tab.alias">
        <span slot="label">
          {{tab.name}}
        </span>
        <keep-alive v-if="tab.alias === currentTab">
          <component v-bind:is="tab.relationComponent" :ref="tab.alias"></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
    <footer-buttons v-if="currentTab === 'normal'" @save="submit" @cancel="setDefault"></footer-buttons>
  </div>
</template>

<script>
import signNormalSetting from '../viewPart/signNormalSetting'
import audienceManage from '../viewPart/audienceManage'
import audienceWhiteList from '../viewPart/audienceWhiteList'
export default {
  name: 'audienceSignIn',
  components: {
    signNormalSetting,
    audienceManage,
    audienceWhiteList
  },
  data: () => {
    return {
      currentTab: 'normal',
      tabs: [
        {
          name: '基本功能',
          alias: 'normal',
          relationComponent: 'signNormalSetting',
        },
        {
          name: '观众白名单',
          alias: 'whiteList',
          relationComponent: 'audienceWhiteList',
        },
        {
          name: '观众管理',
          alias: 'audience',
          relationComponent: 'audienceManage',
        },
      ],
    };
  },
  methods: {
    tabClick(tab, event) {},

    submit() {
      if (this.currentTab === "normal") {
        this.$refs["normal"][0].onSubmit();
      }
    },

    setDefault() {
      if (this.currentTab === "normal") {
        this.$refs["normal"][0].reset();
      }
    }
  },
};
</script>

<style lang="scss">
  .base-sign-in {
    @include main-content;
    // width: 100%;
    // height: 100%;
  }
</style>